<template>
  <el-dropdown @command="handleCommand">
    <span class="el-dropdown-link">
      {{userinfo.username}}
      <i class="el-icon-user"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="setting">
        <Setting>
          <span slot="setting">
            <i class="el-icon-setting"></i>系统设置
          </span>
        </Setting>
      </el-dropdown-item>
      <el-dropdown-item command="clear">
        <i class="iconfont icon-custom-clear"></i>清理缓存
      </el-dropdown-item>
      <el-dropdown-item command="logout" style="border-top: 1px solid #e8e8e8">
        <i class="el-icon-switch-button"></i>退出登录
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import Setting from "./Setting";

export default {
  name: "User",
  data() {
    return {
      userinfo: {},
      fullscreenLoading: false
    };
  },
  created() {
    //获取用户信息
    this.userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
  },
  methods: {
    handleCommand(command) {
      if (command === "logout") {
        this.$store.dispatch('logout').then(res => {
        this.$router.push("/Login");
        });
      }
      if (command === "clear") {
        console.log("clear");
        const loading = this.$loading({
          lock: true,
          text: "清理中,请勿关闭!",
          background: "rgba(0, 0, 0, 0.5)"
        });
        // // setTimeout(() => {
        // //   this.$store.dispatch('logout').then(res => {
        // //     // this.clearAllCookie();
        // //     loading.close();
        // //     this.$notify({
        // //       title: '清理完成',
        // //       message: '请重新登录!',
        // //       type: 'success'
        // //     });
        // //     this.$router.push('/Login');
        // //   });
        // // }, 1500);
        this.$store.dispatch("logout").then(res => {
          this.clearAllCookie();
          loading.close();
          this.$notify({
            title: "清理完成",
            message: "请重新登录!",
            type: "success"
          });
          this.$router.push("/Login");
        });
      }
    },
    //删除所有的cookie
    clearAllCookie() {
      const keys = document.cookie.match(/[^ =;]+(?=\=)/g);
      if (keys) {
        for (let i = keys.length; i--; )
          document.cookie = keys[i] + "=0;expires=" + new Date(0).toUTCString();
      }
    }
  },
  components: {
    Setting
  }
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-icon-user {
  margin-left: 5px;
  font-size: 18px;
}
</style>
